<template>
	<view class="container">
		<view class="tabs">
			<view class="tabs-item" :class="{active: tabsIndex == 0}" @click="tabClick(0)">
				<image style="width: 36rpx;height: 40rpx;" src="../../static/me/people.png" mode="" v-if="tabsIndex == 1"></image>
				<image style="width: 36rpx;height: 40rpx;" src="../../static/me/people.png" v-if="tabsIndex == 0" mode=""></image>
				<text>关注的人</text>
			</view>
			<view class="tabs-item" :class="{active: tabsIndex == 1}" @click="tabClick(1)">
				<image src="../../static/me/car.png" mode="" v-if="tabsIndex == 0"></image>
				<image src="../../static/me/car-active.png" v-if="tabsIndex == 1" mode=""></image>
				<text>关注的车</text>
			</view>
		</view>
		<!-- 关注的人 -->
		<view class="list">
			<view class="person-list" v-if="tabsIndex == 0">
				<view class="person-item" v-for="(item,index) in peopleFollowList" :key="index" @click="peopleClick(item)">
					<view class="touxiang">
						<image :src="item.imageurl" mode=""></image>
					</view>
					<view class="item-center">
						<view class="name">
							<text>{{item.users_name}}</text>
							<image :src="item.icon_url" mode="heightFix"></image>
						</view>
						<view class="zcsc">注册时长：{{item.register_time}}</view>
					</view>
					<view class="ygz" @click="cancelFollow(item)">已关注</view>
				</view>
				<view v-if="peopleFollowList.length === 0" class="empty">
				  <image src="@/static/empty.png"></image>
				</view>
			</view>
			<!-- 关注的车 -->
			<view class="car-list" v-if="tabsIndex == 1">
				<view class="car-item" v-for="(item,index) in carList" :key="index" @click="carClick(item)">
					<view class="car-name">
						<text>{{item.cars_name}}</text>
						<image v-if="item.picture == 1" src="../../static/picture.png" mode=""></image>
					</view>
					<view class="car-a1">
						<view class="a1-left">{{item.label}}</view>
					</view>
					<view class="item-a2">
						<text class="a2-l" v-if="item.guide_price">指导价:{{item.guide_price}}万</text>
						<text v-else></text>
						<text class="a2-r">包牌报税:{{item.price}}万</text>
					</view>
					<view class="item-a3">
						<view class="a3-l">
							<text>{{item.users_name}}</text>
							<image v-if="item.icon_url" :src="item.icon_url" mode="heightFix"></image>
						</view>
						<text class="a3-r">{{item.create_time}}</text>
					</view>
				</view>
				<view v-if="carList.length === 0" class="empty">
				  <image src="@/static/empty.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { peopleFollow, peopleCarsSources } from '../../api/user.js'
	import { followStoreUpdate } from '../../api/newCarSerach.js'
	import {
		getUsedCarDetails
	} from '@/api/secondhandCar.js'
	export default {
		data() {
			return {
				tabsIndex: 0,
				users_id: uni.getStorageSync("login").id,
				peopleFollowList: [],
				peoplePageNum: 100,
				peoplePage: 1,
				carList: [],
				carPageNum: 100,
				carPage: 1,
				vehicle_model_id: ''
			}
		},
		mounted(){
			this.tabClick(this.tabsIndex)
		},
		methods: {
			tabClick(index){
				this.tabsIndex = index
				if(index == 0){
					this.getPeopleFollow()
				}else if(index == 1){
					this.getCarList()
				}
			},
			getPeopleFollow(){
				this.peoplePage = 1
				peopleFollow(this.users_id,this.peoplePageNum,this.peoplePage).then( res => {
					this.peopleFollowList = res.data.data
				})
			},
			peopleClick(item){
				uni.navigateTo({
					url: "/pages/home/carDealer/carDealer?position=" + item.shop_users_id
				})
			},
			getCarList(){
				this.carPage = 1
				
				peopleCarsSources(this.users_id,this.vehicle_model_id,this.carPageNum,this.carPage).then( res => {
					this.carList = res.data.data
				})
			},
			carClick(item){
				if(item.state == 1){//新车
					uni.navigateTo({
						url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + item.cars_id
					})
				}else if(item.state == 2){//二手车
					var that = this
					getUsedCarDetails(item.cars_id, this.users_id, this.endName).then(res => {
						if (res.code == 0) {
							that.dataObject = res.data
							that.$utils.log("点击了item项" + JSON.stringify(item))
							uni.navigateTo({
								url: '/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' +
									item.cars_id + '&isContent=' + true,
								events: {
									// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
									acceptDataFromOpenedPage: function(data) {
										that.$utils.log("打印返回数据 acceptDataFromOpenedPage  " + JSON
											.stringify(data))
									},
									someEvent: function(data) {
										that.$utils.log("打印返回数据 someEvent   " + JSON.stringify(data))
									}
								},
								success: function(res) {
									that.$utils.log("打印发送数据 success   " + JSON.stringify(that
										.dataObject))
									// 通过eventChannel向被打开页面传送数据
									res.eventChannel.emit('acceptDataFromOpenerPage', that.dataObject)
								},
								fail: function(error) {
									that.$utils.log("打印发送数据 fail   " + JSON.stringify(error))
								}
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			},
			// 取消关注
			cancelFollow(item){
				const that = this;
				uni.showModal({
				  title: "温馨提示",
				  content: "确定不再关注吗？",
				  confirmText: "确定",
				  confirmColor: "#0E59EA",
				  cancelText: "取消",
				  cancelColor: "#333333",
				  success: function (res) {
				    if (res.confirm) {
				     followStoreUpdate({
				       users_id: that.users_id,
				       shop_users_id: item.shop_users_id,
				     }).then( res => {
						 uni.showToast({
						   title: "取消关注成功",
						   icon: "none",
						 });
						 that.tabClick(0)
					 })
				    }
				  },
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
	  display: flex;
	  justify-content: center;
	  image {
	    margin-top: 200rpx;
	  }
	}
	.container{
		color: #333;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		height: 100vh;
	}
	.tabs{
		padding: 20rpx 28rpx;
		display: flex;
		gap: 14rpx;
		background-color: #fff;
		.tabs-item{
			height: 92rpx;
			background: #F7F8FA;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #000;
			font-size: 32rpx;
			border-radius: 14rpx;
			gap: 19rpx;
			image{
				width: 42rpx;
				height: 34rpx;
			}
			&.active{
				background: #2D56C5;
				color: #fff;
			}
		}
	}
	.list{
		height: calc(100% - 150rpx);
		overflow-y: auto;
	}
	.person-list{
		.person-item{
			background-color: #fff;
			margin-top: 20rpx;
			padding: 22rpx 30rpx;
			display: flex;
			align-items: center;
			.touxiang{
				image{
					width: 76rpx;
					height: 76rpx;
					border-radius: 76rpx;
				}
			}
			.item-center{
				margin: 0 17rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				.name{
					display: flex;
					text{
						font-weight: 800;
					}
					image{
						height: 30rpx;
						max-width: 100rpx;
					}
				}
				.zcsc{
					font-size: 24rpx;
					color: #999;
					margin-top: 10rpx;
				}
			}
			.ygz{
				width: 140rpx;
				height: 50rpx;
				line-height: 46rpx;
				background: #FFFFFF;
				border: 1rpx solid #2D56C5;
				border-radius: 25rpx;
				font-size: 24rpx;
				color: #2D56C5;
				text-align: center;
			}
		}
	}
	.car-list{
		padding: 20rpx 28rpx;
		.car-item{
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 14rpx;
			padding: 25rpx 20rpx;
			.car-name{
				text{
					font-weight: 800;
				}
				image{
					width: 28rpx;
					height: 24rpx;
					margin-left: 20rpx;
				}
			}
			.car-a1{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				.a1-left{
					font-size: 20rpx;
					 color: #333;
				}
				.a1-right{
					margin-left: 50rpx;
					font-size: 20rpx;
					color: #999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.item-a2{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15rpx;
				.a2-l{
					font-size: 20rpx;
					color: #333;
				}
				.a2-r{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #EC4B4B;
				}
			}
			.item-a3{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 15rpx;
				.a3-l{
					display: flex;
					text{
						font-size: 20rpx;
						color: #333;
					}
					image{
						margin-left: 20rpx;
						height: 30rpx;
						max-width: 140rpx;
					}
				}
				.a3-r{
					font-size: 20rpx;
					color: #999;
				}
			}
		}
	}
</style>
